<template>
  <a-dropdown>
    <div class="header-avatar" style="cursor: pointer">
      <!-- <a-avatar
        class="avatar"
        size="small"
        shape="circle"
        src="../../assets/img/preview-nine.png"
      /> -->
      <div class="pic">
        <img src="../../assets/img/logo.png" alt="" />
      </div>
      <span class="name">{{ this.name }}</span>
    </div>
    <a-menu :class="['avatar-menu']" slot="overlay">
      <!-- <a-menu-item>
        <a-icon type="user" />
        <span>个人中心</span>
      </a-menu-item>
      <a-menu-item>
        <a-icon type="setting" />
        <span>设置</span>
      </a-menu-item>
      <a-menu-divider /> -->
      <a-menu-item @click="logout">
        <a-icon style="margin-right: 8px" type="poweroff" />
        <span>退出登录</span>
      </a-menu-item>
      <a-menu-item @click="swithModel">
        <a-icon style="margin-right: 8px" type="setting" />
        <span>修改密码</span>
      </a-menu-item>
      <a-modal
        title="修改密码"
       v-model="visible"
        :destroyOnClose="true"
        @ok="closeModal"
        :footer="null"
      >
        <UpdatePass />
      </a-modal>
    </a-menu>
  </a-dropdown>
</template>

<script>
import { mapGetters } from "vuex";
import { logout } from "@/services/user";
import UpdatePass from "../../pages/login/UpdatePass.vue";
// import { getUser } from "../../services/dataSource";

export default {
  name: "HeaderAvatar",
  data() {
    return {
      name: "",
      userId: "",
      visible: false,
    };
  },
  components: { UpdatePass },
  computed: {
    ...mapGetters("account", ["user"]),
  },
  methods: {
    logout() {
      logout();
      window.localStorage.removeItem("userId");
      window.localStorage.removeItem("Authorization");
      window.localStorage.removeItem("disbNO");
      window.localStorage.removeItem("id");
      window.localStorage.removeItem("disbName");
      window.localStorage.removeItem("memberID");
      window.localStorage.removeItem("distype");
      window.localStorage.removeItem("bankAccount");
      this.$router.push("/login");
    },
    swithModel() {
      this.visible = true;
    },
    closeModal(e){
      this.visible =false
    }
  },
  created() {
    this.userId = localStorage.getItem("userId");
    this.name=localStorage.getItem('disbName')
    // getUser(this.userId)
    //   .then((res) => {
    //     console.log(res);
    //     this.name = res.data.result.name;
    //   })
    //   .catch((err) => {
    //     console.log(err);
    //   });
  },
};
</script>

<style lang="less">
.header-avatar {
  margin-right: 20px;
  display: inline-flex;
  .avatar,
  .name {
    align-self: center;
  }
  .avatar {
    margin-right: 8px;
  }
  .name {
    font-weight: 500;
  }
}
.avatar-menu {
  width: 150px;
}
.pic {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin: auto 0.625rem auto 0;

  // background-color: pink;
  img {
    width: 100%;
    height: auto;
  }
}
</style>
